<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>20190910作业</title>
		<link rel="stylesheet" type="text/css" href="css/1.css" />

		<style type="text/css">
			.box {
				width: 400px;
				height: 500px;
				border: 1px solid black;
			}
			
			.one {
				float: left;
			}
			
			.one img {
				height: 150px;
			}
			
			.two {
				margin: 10px;
				margin-left: 120px;
				s
			}
			
			.three {
				width: 240px;
				float: left;
				margin: 10px;
			}
			
			.four {
				float: left;
			}
			
			.four img {
				height: 150px;
			}
			
			.five {
				margin: 10px;
				margin-left: 120px;
				s
			}
			
			.six {
				width: 240px;
				float: left;
				margin: 10px;
			}
			
			.seven {
				float: left;
			}
			
			.seven img {
				height: 150px;
			}
			
			.eight {
				margin: 10px;
				margin-left: 120px;
				s
			}
			
			.nine {
				width: 240px;
				float: left;
				margin: 10px;
			}
		</style>

	</head>

	<body>

		<div class="box">

			<div class="one">
				<img src="img/02.jpg" />
			</div>

			<div>
				<div class="two clearfix">
					<p style="float: left;"><b>环太平洋</b></p>
					<p style="float: right; color: red;">468人评论过</p>

					<div class="three">
						<span style="color: skyblue;">#环太平洋##环太平洋</span>
						<span>对影建筑物倒塌、核弹攻击、外星人入侵...</span>
						<span style="color: red;">[详细]</span>
					</div>

					<div style="float: left;"><img src="img/04.jpg" />欧美电影</div>
				</div>
			</div>

			<div class="four">
				<img src="img/1.png" />
			</div>

			<div>
				<div class="five clearfix">
					<p style="float: left;"><b>速度与激情6</b></p>
					<p style="float: right; color: red;">783人评论过</p>

					<div class="six">
						<span>【杰森·斯坦森确定加盟</span>
						<span style="color: skyblue;">#速#】</span>
						<span>斯坦森演第六部大反派欧文·肖...</span>
						<span style="color: red;">[详细]</span>
					</div>

					<div style="float: left;"><img src="img/04.jpg" />热映推荐</div>
				</div>
			</div>

			<div class="seven">
				<img src="img/03.jpg" />
			</div>

			<div>
				<div class="eight clearfix">
					<p style="float: left;"><b>青春派</b></p>
					<p style="float: right; color: red;">97人评论过</p>

					<div class="nine">
						<span>《青春派》预告片“零差评”逆增长</span>
						<span style="color: red;">[详细]</span>
					</div>

					<div style="float: left;"><img src="img/04.jpg" />电影预告</div>
				</div>
			</div>

		</div>

	</body>

</html>